<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab
        {
            width:33%;
            border: solid 1px green;
            border-collapse: collapse;  
            margin: 5px auto;
        }
        .tab td
        {
            border: solid 1px green;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{info}}</h2>
        
        <div>{{books[1].f_title}}
            <img :src="path + books[2].f_image" alt="" style="width:200px;height:200px;">
        </div>

        <table class="tab">
            <tr>
                <td>书号</td>
                <td>书名</td>
                <td>作者</td>
                <td>类型</td>
                <td>价格</td>
                <td>封面</td>
            </tr>
            <tr v-for="bk in books">
                <td>{{bk.f_id}}</td>
                <td>{{bk.f_title}}</td>
                <td>{{bk.f_author}}</td>
                <td>{{bk.f_type}}</td>
                <td>{{bk.f_price}}</td>
                <td><img :src="path + bk.f_image" alt="" style="width:100px;height:100px;"></td>
            </tr>
        </table>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>

    <script>        
        let vm = new Vue({
            el: '#app',            
            data:{
                    info:'图书信息管理',                    
                    books:[], //图书数组，保存数据库中的图书记录
                    path:'http://localhost:44355/Content/img/',
            },
            
            //自定义方法
            methods:{
                f1(){
                    let _this = this

                    axios.get('http://localhost:44355/Book/Index')
                         .then(function (rs) {
                        _this.books = rs.data
                       
                    })

                },
                
            },
            //生命周期：类似webform的 XX_load( )
            created(){
                this.f1()
            },
        })
    </script>
</body>
</html>